<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="js/jquery-3.7.1.js"></script>
<style>

#menu {
	width: 180px;
	height: 98%;
	border-width: 2px;
	border-color: black;
	border-style: solid;
	overflow: auto;
	position: absolute;
}

#example1 {
	border: 2px solid #a1a1a1;
	padding: 10px 40px;
	background:#dddddd;
	width: 300px;
	border-radius: 25px;
}

a:link {text-decoration:none;}
ul {
	list-style-type: none;
}
li {
	white-space: nowrap;
}

</style>
<script>


$(function(){
	
var menuJson = [
	{
		"name":"一级目录一", 
		"items":[
			{
				"name":"二级目录一",
				"items":[
					{"name":"三级目录一"},
					{"name":"三级目录二"},
					{"name":"三级目录三"}
				]
			},
			{"name":"二级目录二"},
			{"name":"二级目录三"}
		]
	},
	{"name":"一级目录二"},
	{"name":"一级目录三"},
	{"name":"一级目录四"},
	{"name":"一级目录五"},
	{"name":"一级目录六"},
	{"name":"一级目录七"},
	{"name":"一级目录八"},
	{"name":"一级目录九"},
	{"name":"一级目录十"},
	{"name":"一级目录十一"}
];

function processMenu(menuJsonArray) {
	var menuStr = "";
	if (menuJsonArray != null && menuJsonArray.length > 0) {
		console.log("menuJsonArray.length:" + menuJsonArray.length);
		menuStr += "<ul>\r\n";
		
		for (const obj of menuJsonArray) {
			menuStr += "<li><a href='http://www.bing.com'>" + obj.name + "</a>\r\n"
			if (obj.items != null && obj.items.length > 0) {
				menuStr += processMenu(obj.items);
			}
			menuStr += "</li>\r\n";
		}
		menuStr += "</ul>\r\n";
	}
	return menuStr;
}

	var menuStr1 = processMenu(menuJson);
	console.log(menuStr1);
	
	$("#menu").append(menuStr1);
	
});

</script>
</head>
<body>

<div id="menu">

</div>
<!--
<div id="example1">
<p>ddd</p>
</div>
-->
</body>
</html>